<template>
    <div class="container">
        <!-- 更新标题 -->
        <h3>点击好友跳转聊天</h3>
        <ul>
            <li v-for="friend in friends" :key="friend" @click="navigateToChat(friend)">
                {{ friend }}
            </li>
        </ul>

        <!-- 添加好友 -->
        <h3>添加好友</h3>
        <input v-model="newFriendId" placeholder="输入好友ID" class="input-field" />
        <button @click="addFriend" class="btn-action">添加</button>

        <!-- 错误提示 -->
        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
</template>

<script>
import request from "../../utils/request";
import Chat from '@/pages/index/chat.vue'

export default {
    data() {
        return {
            friends: [], // 好友列表
            newFriendId: "", // 新好友ID
            errorMessage: "", // 错误信息
        };
    },
    created() {
        this.fetchFriends();
    },
    methods: {
        // 获取好友列表
        async fetchFriends() {
            try {
                const userId = uni.getStorageSync('username');
                if (!userId) {
                    throw new Error("未找到用户ID");
                }
                const response = await request.get("/friends", { params: { userId } });
                this.friends = response;
            } catch (error) {
                this.errorMessage = "获取好友列表失败";
                console.error(error);
            }
        },
        // 跳转到聊天页面
        navigateToChat(friend) {
            uni.navigateTo({
                url: `/pages/index/chat?friendName=${encodeURIComponent(friend)}`
            });
        },
        // 添加好友
        async addFriend() {
            try {
                const userId = uni.getStorageSync('username');
                if (!userId) {
                    throw new Error("未找到用户ID");
                }
                const friendId = this.newFriendId.trim();
                if (!friendId) {
                    this.errorMessage = "请输入好友ID";
                    return;
                }
                await request.post("/add-friend", null, { params: { userId, friendId } });
                this.errorMessage = "";
                this.newFriendId = "";
                this.fetchFriends(); // 刷新好友列表
            } catch (error) {
                this.errorMessage = "添加好友失败";
                console.error(error);
            }
        },
    },
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 20px;
    /* 组件之间间距 */
}

h3 {
    margin: 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
    cursor: pointer;
    /* 添加鼠标悬停效果 */
}

.input-field {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    /* 输入框边框 */
    border-radius: 5px;
}

.btn-action {
    width: 80%;
    padding: 10px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.error-message {
    color: red;
    font-size: 14px;
}
</style>